@import 'scss-imports/variables';

.table-header {
  align-items: flex-end;
  color: var(--fg1);
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  min-height: 56px;

  h2 {
    align-items: center;
    display: flex;
    margin-top: 20px;
    min-height: 36px;
  }

  .bulk {
    align-items: center;
    display: flex;
    gap: 6px;
  }
}

.app-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: auto;
}

.app-inner {
  background-color: var(--bg2);
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: fit-content;

  @media (max-width: $breakpoint-tablet) {
    min-height: fit-content;
    min-width: unset;
    overflow-x: auto;
  }
}

ix-app-row,
.app-header-row {
  grid-template-columns: 5% minmax(18%, auto) 10.5% 4% 7% 10.5% 11% 13% 10%;

  @media (max-width: $breakpoint-tablet) {
    grid-template-columns: 45px auto 0 0 0 0 0 0;
  }
}

.app-header-row {
  align-items: center;
  background: var(--bg1);
  border-bottom: 1px solid var(--lines);
  color: var(--fg2);
  display: grid;
  grid-gap: 8px;
  min-height: 48px;
  min-width: fit-content;

  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;

  > div {
    align-items: center;
    display: flex;
    font-weight: bold;
    height: 100%;
    justify-content: flex-start;
    padding: 4px 0;

    @media (max-width: $breakpoint-tablet) {
      display: none !important;
    }

    &:first-child {
      left: 0;
      position: sticky;

      @media (max-width: $breakpoint-tablet) {
        display: block !important;
      }
    }

    &:nth-child(2) {
      @media (max-width: $breakpoint-tablet) {
        display: flex !important;
      }
    }

    &:last-child {
      justify-content: center;
    }
  }

  .app-update-header {
    align-items: center;
    display: flex;
    gap: 4px;

    ix-icon {
      color: var(--yellow);
      font-size: 18px;
      line-height: 1;
      margin-left: 4px;
    }
  }
}
